<html>
<head>
<meta charset="utf-8">
<title>订单展示</title>

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/vue/vue.min.js"></script>
<script src="js/jquery/jquery.min.js"></script>
<script src="js/laypage/laypage.js" charset="utf-8"></script>
<script src="js/layer/layer.js" charset="utf-8"></script>
</head>



<body>
	<div id="app" class="container">
		<div class="table-responsive">
			<table class="table">
				<thead>
					<tr class="success">
						<td>编号</td>
						<td>订单名字</td>
						<td>价格</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr class="active" v-for="(item, index) in result">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.price}}￥</td>
						<td><a href="#" @click="editEvent(item.id)">编辑</a> <a href="#" @click="delEvent(item.id)">删除</a></td>
					</tr>
				</tbody>
			</table>
			<div id="pagenav"></div>
		</div>
		<p class="bg-danger">
			<button type="button" id="addOrder" class="btn btn-primary">增加用户</button>
		</p>
	</div>
<script>
	var app=new Vue({
		 el: '#app',
		  data: {
			  result: []
		  }
	});
	
	
	
	
	
	//查询订单
	var getUserPageList=function(curr){
		$.ajax({
			type:"GET",
			dataType:"json",
			url:"/order/list",
			data:{
				pageIndex:curr || 1,
				pageSize:2
			},
			success:function(msg){
				app.result=msg.list;
				laypage({
					cont : 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
					pages : msg.totalPage, //总页数
					first : true,
					last : true,
					curr : curr || 1, //当前页
					jump : function(obj, first) { //触发分页后的回调
						if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
							getUserPageList(obj.curr);
						}
					}
				});
			}
		});
	}
	getUserPageList()
	
	
	//增加订单
	$('#addOrder').on('click',function(){
		layer.open({
			  type: 2,
			  title: '增加订单',
			  fix: false,
			  maxmin: true,
			  shadeClose : true,
			  area: ['1100px', '500px'],
			  content: 'order_add.html', //iframe的url，no代表不显示滚动条
			  end: function(){ //此处用于演示
				  getUserPageList();
			  }
			});
	});
	//删除订单
	var delEvent = function(id){
		layer.confirm('你确定要删除么？',{
			btn : [ '是', '否' ]
		},function(){
			$.ajax({
				type:"GET",
				dataType:"json",
				url:"order/del",
				data:{
					id:id
				},
				success:function(msg){
					getUserPageList();
					layer.msg('已经成功删除记录' + id,{icon:5});
				}
			});
		})
	}
	//修改订单
	 var editEvent = function(id){
		 layer.open({
			  type: 2,
			  title: '编辑订单',
			  fix: false,
			  maxmin: true,
			  shadeClose : true,
			  area: ['1100px', '600px'],
			  content: '/order/findById?id='+id, //iframe的url，no代表不显示滚动条
			  end: function(){ //此处用于演示
				  getUserPageList();
			  }
			});
	}
</script>

</body>
</html>
